<template>
  <view class="invite-con">
    <view class="page-header-bar"> </view>
    <view style="height: 106rpx" class="am-flex-rc-center">
      <view class="invite-line"></view>
      <view class="wx-name"> 邀请有礼 </view>
      <view class="invite-line"></view
    ></view>
    <view class="invite-box am-flex-rc-center">
      <view class="invite-box-item"
        >活动规则说明：<br />
        1、用户在线下或在当前商城消费满{{
          configData.cashBackThreshold
        }}元，用户可获得{{
          configData.cashBackRate
        }}%返现金（当前返现金为锁定状态）。<br />
        2、返现金解锁方式：用户可成功邀请{{
          configData.cashBackCustomerNum
        }}个新用户，且新用户在线下或当前商城消费满{{
          configData.cashBackConsumeRate
        }}%后，用户的返现金可进行解锁，用户可用于提现或在当前商城进行消费。<br />
        3、用户在解锁返现金后，每邀请{{
          configData.incentiveCustomerNum
        }}个新用户，且新用户在线下或当前商城消费满{{
          configData.incentiveCustomerRate
        }}%，用户可获得{{
          configData.incentiveRate
        }}%奖励金,用户可用于在当前商城进行消费。<br />
        4、用户的返现金在满{{
          configData.cashBackYearLimit
        }}年内未使用完时，返现金将进行锁定，用户可在线下或本商城进行重新消费满{{
          configData.cashBackAgainThreshold
        }}%后，且邀请{{
          configData.cashBackAgainCustomerNum
        }}个新用户，新用户在线下或当前商城消费满{{
          configData.cashBackAgainConsumeRate
        }}%，用户的锁定返现金可进行解锁。解锁后，用户可用于提现或在当前商城进行消费。<br />
        5、以上活动内容解释权归本店所有。
      </view>
    </view>
    <view class="invite-code">
      <u-field
        label-width="180"
        input-align="right"
        disabled
        v-model="info.invitationCode"
        label="我的邀请码"
      >
        <span
          slot="right"
          class="custom-style"
          @click="copy(info.invitationCode)"
          >复制</span
        >
      </u-field>
      <u-field
        :disabled="isInvited"
        label-width="200"
        input-align="right"
        required
        v-model="info.invitedCode"
        label="介绍人的邀请码"
        placeholder="请输入"
      >
      </u-field>
      <text v-if="!isInvited" class="tip"
        >(填写的邀请码，为邀请人的邀请码，不可填写自己的邀请码)</text
      >
      <button
        v-if="!isInvited"
        class="u-reset-button invite-button"
        hover-class="co-primary-button--hover"
        @click="submit"
      >
        提交
      </button>
    </view>
  </view>
</template>

<script>
import {
  navigationHeight,
  navBarHeight,
  menuPlaceWidth
} from '@/utils/systemInfo.js'
import { writeInvitationCode, selectLevelConfig } from '@/api/user.js'
import { appOnLaunch } from '@/utils/appGlobalLifeCycle'
// 不允许请求的type
const noRequestType = [1, 2, 3]
export default {
  options: {
    styleIsolation: 'apply-shared'
  },
  data() {
    return {
      navbarBackground: {},
      navigationHeight,
      navBarHeight,
      menuPlaceWidth,
      isInvited: false,
      info: {
        invitationCode: '',
        invitedCode: ''
      },
      customStyle: {
        color: 'red'
      },
      configData: {}
    }
  },
  onShow() {
    if (!this.$store.getters.isLogin) {
      appOnLaunch()
      return
    }
  },
  onLoad() {
    this.selectLevelConfigHandle()
    this.info.invitationCode = this.userinfo.invitationCode
    this.info.invitedCode = this.userinfo.invitedCode
    this.isInvited = this.userinfo.invitedCode ? true : false
  },
  computed: {
    userinfo() {
      return this.$store.state.userInfo
    }
  },
  methods: {
    selectLevelConfigHandle() {
      selectLevelConfig().then((res) => {
        console.log(res, 'res,REs')
        this.configData = res.data.data
      })
    },
    // 提交
    submit() {
      writeInvitationCode({ invitationCode: this.info.invitedCode })
        .then(({ data }) => {
          console.log(data, 'Gtp0dXC7Gtp0dXC7Gtp0dXC7')

          if (data.code == '200') {
            this.isInvited = true
            uni.showToast({
              title: data.msg
            })
            // this.isInvited = true
          } else {
            uni.showToast({
              icon: 'none',
              title: data.msg
            })
          }
        })
        .catch((err) => {
          uni.showToast({
            icon: 'none',
            title: '提交失败!'
          })
        })
    },
    copy(res) {
      uni.setClipboardData({
        data: res,
        success: () => {
          uni.showToast({
            title: '复制成功'
          })
        }
      })
    }
  },
  onReachBottom() {}
}
</script>

<style lang="scss" scoped>
$page-plr: 32rpx;

.page-header-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 750rpx;
  height: 558rpx;
  background-image: url('https://kc-glasses-mall-langjing.oss-cn-chengdu.aliyuncs.com/2024/09/20/49894513cad34960bcf8d820bef8ebdcinvite-bg.png');
  background-repeat: repeat-x;
  background-size: cover;
}
.invite-line {
  width: 40rpx;
  height: 12rpx;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 249, 238, 0.5) 100%
  );
  border-radius: 6rpx 6rpx 6rpx 6rpx;
}
.wx-name {
  margin: 0 10rpx;
  text-align: center;
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 600;
  font-size: 36rpx;
  color: #ffffff;
  line-height: 40rpx;
  font-style: normal;
  text-transform: none;
}
.invite-box {
  margin: 24rpx;
  margin-top: 0;
  display: flex;
  background: #fbd7bd;
  height: 880rpx;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
}
.invite-box-item {
  width: 654rpx;
  height: 832rpx;
  padding: 32rpx 24rpx;
  background: #fff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 26rpx;
  color: #1d2129;
  line-height: 48rpx;
  text-align: justify;
}
.invite-code {
  padding: 0 32rpx;
}
.custom-style {
  font-size: 30rpx;
  color: #f14141;
  line-height: 40rpx;
}
.tip {
  display: inline-block;
  height: 100rpx;
  line-height: 100rpx;
  margin: 0;
  font-size: 24rpx;
  color: #c8c9cc;
}
.invite-button {
  margin-top: 30rpx;
  width: 688rpx;
  height: 80rpx;
  background: linear-gradient(323deg, #ff4564 0%, #f14141 14%, #fc843b 100%);
  border-radius: 200rpx 200rpx 200rpx 200rpx;
  font-size: 36rpx;
  color: #ffffff;
  line-height: 80rpx;
}
</style>
